<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用户管理</title>
		<link rel="stylesheet" type="text/css" href="z_yonghu.css" />
	</head>

	<body>
		<div class="z_box">
			<div class="z_left_yh">
				<ul class="z_left_ul active">
					<li>修改密码</li>
					<li>操作日志</li>
					<li>登录日志</li>
					<li>新增用户</li>
					<li>修改用户	</li>
					<li>删除用户</li>
					<li>启动</li>
					<li>禁用</li>
				</ul>
				<ul class="z_left_ul">
					<li>修改密码2</li>
					<li>操作日志2</li>
					<li>登录日志2</li>
					<li>新增用户2</li>
					<li>修改用户2	</li>
					<li>删除用户2</li>
					<li>启动2</li>
					<li>禁用2</li>
				</ul>
				<ul class="z_left_ul">
					<li>启动</li>
					<li>禁用</li>
				</ul>
			</div>	
			<div class="z_right_yh">
				<ul class="z_top_yh">
					<li class="active">CMS用户管理</li>
					<li>CMS角色管理</li>
					<li>客户端用户管理</li>
				</ul>
				<div class="z_bottom_yh">
					<div class="active">
						<div class="z_con1">
							<span>搜索：<div></div></span>
							<select>
								<option>状态</option>
							</select>
							<select>
								<option>用户类型</option>
							</select>
							<span>注册时间段：<div style="margin-left: 100px;"></div></span>
						</div>
						<table class="table" border="1" cellspacing="0" cellpadding="0">
							<tr>
								<td>ID</td>
								<td>账号</td>
								<td>账号昵称</td>
								<td>EMAJL</td>
								<td>账号状态</td>
								<td>上次登录IP</td>
								<td>上次登录日期</td>
								<td>角色</td>
								<td>注册日期</td>
								<td>日志</td>
							</tr>
							<tr>
								<td><input type="checkbox" />1</td>
								<td>qiubiao</td>
								<td>Biao</td>
								<td>xxx@xx.com</td>
								<td>正常</td>
								<td>xx.xx.xx.xx</td>
								<td>2018-10-3 17.25：01</td>
								<td>管理员</td>
								<td>018-10-3 18</td>
								<td class="active">操作日志</td>
							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td class="active"></td>
							</tr>
						</table>
					</div>
					<div>
						2
					</div>
					<div>
						<div class="z_con1">
							<span>搜索：<div></div></span>
							<select>
								<option>状态</option>
							</select>
							<span>注册时间段：<div style="margin-left: 100px;"></div></span>
						</div>
						<table class="table" border="1" cellspacing="0" cellpadding="0">
							<tr>
								<td>ID</td>
								<td>账号</td>
								<td>账号昵称</td>
								<td>APP版本</td>
								<td>状态</td>
								<td>上次登录IP</td>
								<td>上次登录日期</td>
								<td>注册日期</td>
								<td>其他信息</td>
							</tr>
							<tr>
								<td><input type="checkbox" />1</td>
								<td>test</td>
								<td>Text</td>
								<td>1.0.1</td>
								<td>正常</td>
								<td>xx.xx.xx.xx</td>
								<td>2018-10-3 17.25：01</td>
								<td>2018-10-3 18</td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						</table>
					</div>
				</div>

			</div>
		</div>
	</body>
	<script src="jquery.js"></script>
	<script>
		$(function() {　　
			$(".z_top_yh li").click(function() {　　　　 //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
				　　　　
				$(this).addClass("active").siblings().removeClass("active").parent().parent().siblings().children().children().removeClass("active");　　　　 //获取选中元素的下标
				　　　　
				var index = $(this).index();　　　　
				$(this).parent().siblings().children().eq(index).addClass("active").siblings().removeClass("active");　
				$(this).parent().parent().siblings().children().eq(index).addClass("active").siblings().removeClass("active");
			});
		});
	</script>

</html>